<div fxLayoutAlign="center">
  <mat-card class="mat-elevation-z6">

    <h1 translate>NAV_COMPLAIN</h1>

    <div class="confirmation" [hidden]="!(confirmation && !messageControl.dirty)">{{ confirmation }}</div>

    <div class="error fileUploadError" *ngIf="(fileUploadError && fileUploadError.name == 'mimeType')">{{
      "INVALID_FILE_TYPE" | translate: { type: 'PDF, ZIP' } }}
    </div>
    <div class="error fileUploadError" *ngIf="(fileUploadError && fileUploadError.name == 'fileSize')">{{
      "INVALID_FILE_SIZE" | translate: { size: '100 KB' } }}
    </div>

    <div class="form-container" id="complaint-form">

      <mat-form-field appearance="outline" color="accent">
        <mat-label translate>LABEL_CUSTOMER</mat-label>
        <input [formControl]="customerControl" type="text" matInput aria-label="Text field for the mail address of the user">
      </mat-form-field>

      <mat-form-field appearance="outline" color="accent">
        <mat-label translate>LABEL_MESSAGE</mat-label>
        <mat-hint translate>
          <i class="fas fa-exclamation-circle"></i>
          <em style="margin-left:5px;" translate>{{ 'MAX_TEXTAREA_LENGTH' | translate: {length: '160'} }}</em>
        </mat-hint>
        <textarea #complaintMessage id="complaintMessage" [formControl]="messageControl" matAutosizeMinRows="4" matAutosizeMaxRows="4"
                  matTextareaAutosize cols="50" maxlength="160" matInput
                  placeholder="{{ 'WRITE_MESSAGE_PLACEHOLDER' | translate}}"
                  aria-label="Field for entering the complaint"></textarea>
        <mat-error *ngIf="messageControl.invalid && messageControl?.errors.required">{{"MANDATORY_MESSAGE" |
          translate}}
        </mat-error>
        <mat-hint align="end">{{complaintMessage.value?.length || 0}}/160</mat-hint>
      </mat-form-field>

      <div style="margin-top: 15px;">
        <label for="file" translate>LABEL_INVOICE<span>:</span></label>
        <input #fileControl ng2FileSelect [uploader]="uploader" id="file" type="file" accept=".pdf,.zip" style="margin-left: 10px;" aria-label="Input area for uploading a single invoice PDF or XML B2B order file or a ZIP archive containing multiple invoices or orders<!---->">
      </div>

    </div>

    <button type="submit" id="submitButton" [disabled]="messageControl.invalid || fileUploadError" (click)="save()"
            mat-raised-button color="primary" aria-label="Button to send the complaint">
      <i class="material-icons">
        send
      </i>
      {{'BTN_SUBMIT' | translate}}
    </button>

  </mat-card>
</div>
